<!--用户反馈页面-->
<template>
  <div>

    <!--    用户反馈信息展示表-->
    <el-table
        :data="tableData"
        height="500"
        border
        style="width: 100%"
        @expand-change="detailedInformation"
    >
      <el-table-column
          prop="time"
          label="反馈时间"
          width="240">
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="word"
          label="反馈内容"
          width="600">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div style="height: 100%">
            <el-button round @click="openDialog(scope.$index, scope.row)"
            ><i class="el-icon-chat-round"></i>
              回复
            </el-button>
            <!--            <el-button round @click=""-->
            <!--            ><i class="el-icon-delete"/>-->
            <!--            </el-button>-->
          </div>
        </template>

      </el-table-column>


    </el-table>

    <!--    弹出框 ，给反馈用户发信息-->
    <el-dialog
        title="回复"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
    >

      <!--   弹出框中的主体内容   -->
      <div id="content">
       <span>
          <el-autocomplete
              style="width: 540px;"
              type="textarea"
              popper-class="my-autocomplete"
              v-model="state"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect">
          <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick">
          </i>

          <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
          </template>

        </el-autocomplete>
       </span>
      </div>

      <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="Submit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "UserFeedback",
  data() {
    return {
      tableData: [],
      restaurants: [],
      state: '',
      dialogVisible: false,
      userId: ''
    }
  },
  created() {
    this.load();
  },
  methods: {
    load() {//得到所有的用户反馈记录
      this.request.get("admin/getAllAdvise").then(res => {
        console.log(res)
        if (res.state === 200) {
          for (let i = 0; i < res.data.length; i++) {
            let v = {}
            v.uid = res.data[i].uid
            v.username = res.data[i].username
            v.time = res.data[i].advise_time
            v.word = res.data[i].advise
            this.tableData.push(v)
          }
        }

      })
    },
    handleClose(done) { // 点击关闭弹出框的x的时候会触发什么东西
      this.$confirm('操作未保存，确认关闭？')
          .then(_ => {
            done();
            //1.将输入框清空
            this.state = ""
          })
          .catch(_ => {

          });
    },
    openDialog(index, row) { //打开弹出框

      //2.将弹出框弹出
      this.dialogVisible = true
      //3.得到当前回复的用户的id
      this.userId = row.uid
    },
    cancel() {//点击弹出框的取消按钮
      //1.将弹出框关闭
      this.dialogVisible = false

    },
    Submit() {//点击弹出框的确定按钮
      //1.将弹出框关闭
      this.dialogVisible = false
      //2.发送请求（给用户发送信息）
      let v = {targetUserId: this.userId, text: this.state, isAdmin: true}
      console.log(v)
      this.request.post("message/send", v).then(res => {
        // console.log(res)
        if (res.state === 200) {
          //修改成功,刷新页面
          this.$message.success("回复成功")
          // this.load()
        }
      })
      //1.将输入框清空
      this.state = ""
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {"value": "亲亲，抱歉让您久等了，我也恨不得有三头六臂可以第一时间回复您的信息，并非有意怠慢，还请您见谅哈，您的意见我们会第一时间收纳的，感谢您的反馈"},
        {"value": "亲，非常抱歉给您带来这么多的麻烦，您先消消气，如果是我们的问题，我们一定会负责到底，给您一个说法的。"},
        {"value": "亲，感谢您的反馈，我们将会做得更好"},
      ];
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },

  },
  mounted() {
    this.restaurants = this.loadAll();
  }
}
</script>

<style>

</style>
